<template>
      <van-nav-bar
  title="活动中心"
  left-text="返回"
  left-arrow
  @click-left="fanhui"
/>
<!-- &lt;!&ndash;添加按钮&ndash;&gt;-->
<!-- <div class="tools-div">-->
<!--    <el-button type="success" size="small" @click="addShow">添加活动</el-button>-->
<!--  </div>-->

  <el-dialog v-model="dialogVisible" title="添加" width="200%">
    <el-form label-width="120px">
      <el-form-item label="活动标题">
        <el-input v-model="sysUser.acticityTitle" />
      </el-form-item>
      <el-form-item label="活动名称">
        <el-input v-model="sysUser.activityName" />
      </el-form-item>
      <el-form-item label="开始时间">
        <el-date-picker
        v-model="sysUser.startTime"
        type="datetime"
        placeholder="Select date and time"
      />
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker
        v-model="sysUser.endTime" 
        type="datetime"
        placeholder="Select date and time"
      />
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="sysUser.remark" />
      </el-form-item>
      <el-form-item label="活动图片">
        <el-upload
          class="avatar-uploader"
          action="http://localhost:8960/admin/system/fileUpload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :headers="headers"
        >
          <img v-if="sysUser.imgs" :src="sysUser.imgs" style="width: 200px; height: 200px;" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="领取优惠卷数量">
        <el-input v-model="sysUser.acnum" />
      </el-form-item>
      <el-form-item label="优惠卷价格">
        <el-input v-model="sysUser.acticityMony" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">提交</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>


  <!-- :label="battery.remark" -->
    <div class="battery-rental">
      <van-list>
        <van-cell
          v-for="battery in batteries"
          :key="battery.id"
          :title="battery.acticityTitle"
          is-link
          @click="handleDetails(battery)" 
        >
          <template #icon>
            <img :src="battery.imgs" alt="电瓶图片" class="battery-image" />
          </template>
        </van-cell>
      </van-list>
  
      <van-popup v-model:show="showPopup" position="bottom">
        <div class="popup-content">
          <h3>领取电瓶</h3>
          <p>你确定要领取 {{ selectedBattery.activityName }} 吗？</p>
          <van-button type="primary" @click="confirmRent">确认领取</van-button>
          <van-button @click="closePopup">取消</van-button>
        </div>
      </van-popup>
  
      <van-dialog
        v-model:show="showDetails"
        title="活动详情"
        show-confirm-button
        @confirm="closeDetails"
      >
        <div>
          <h4>活动名称: {{ selectedBattery.activityName }}</h4>
          <p>活动时间: {{ selectedBattery.startTime}}-至-{{  selectedBattery.endTime }}</p>
          <p>活动描述: {{selectedBattery.remark }}</p>
          <p>活动数量: {{selectedBattery.acnum }}</p>
          <van-button type="info" @click="handleCoupon">领取优惠券</van-button>
        </div>
      </van-dialog>
  
      <!-- <van-toast v-model:show="showToast" type="success" message="优惠券领取成功！" /> -->
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import {huodonglist,lingqu,huodongsave} from '@/api/userinfo';
  import { showSuccessToast, showFailToast } from 'vant';
  const router = useRouter();
  
// 活动信息
  const batteries = ref([]);

  const huodongList =async()=>{
    const {data}= await huodonglist() 
    batteries.value=data.data
};

huodongList()

  
  const showPopup = ref(false);
  const showDetails = ref(false);
  const showToast = ref(false);

  const selectedBattery = ref({});

  const activityDetails = ref({});
  console.log(activityDetails.value);
  

  
  const handleDetails = (battery) => {
    selectedBattery.value = battery;
    showDetails.value = true;
  };
  
  const closeDetails = () => {
    showDetails.value = false;
  };
   //领取优惠券
  const handleCoupon = () => {

    showPopup.value=true
    showToast.value = true;
  };
  
  const closePopup = () => {
    showPopup.value = false;
   
  };
 //确认领取优惠卷
  const confirmRent = async() => {
    const {data}= await lingqu(selectedBattery.value) 
    // 领取失败  
    if(data.code==202){
      showFailToast(data.message);
    } 
      // 只能领取一张 
    if(data.code==203){
      showFailToast(data.message);
    } 
    // 领取成功
    if(data.code==200){
      showSuccessToast(data.message);
    }
  

    console.log(`已领取电瓶: ${selectedBattery.value.activityName}`);
    closePopup();
  };
  // 添加活动
const dialogVisible = ref(false)

const form = {}
const sysUser = ref(form)

//点击修改按钮弹出框，数据回显
const editSysUser = row => {
  sysUser.value = { ...row }
  dialogVisible.value = true
}

//点击添加弹出框
const addShow = () => {
  sysUser.value = {}
  dialogVisible.value = true
}

//提交方法
const submit = async () => {
    const { data } = await huodongsave(sysUser.value)
    if (data.code == 200) {
      dialogVisible.value = false
      showSuccessToast('操作成功')
      huodongList()
    
  }
}

// 图像上传成功以后的事件处理函数
const handleAvatarSuccess = (response, uploadFile) => {
    sysUser.value.imgs = response.data
}

// 返回
const fanhui = () => {
  router.push('/userinfo')
}
  </script>
  
  <style scoped>
  .battery-rental {
    padding: 20px;
  }
  
  .battery-image {
    width: 200px;
    height: 100px;
    object-fit: cover;
    border-radius: 10px;
    
  }
  
  .popup-content {
    padding: 16px;
    text-align: center;
  }

  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
  </style>
  